<template>
  <el-dialog :append-to-body="true" :inline="true" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="600px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="地图名称">
        <el-input v-model="form.mapName" class="form_input" prop="mapName"/>
      </el-form-item>
      <el-form-item label="地图地址" class="form_input_row">
        <el-upload
          class="avatar-uploader"
          :headers="headers"
          :action="imagesUploadApi"
          :show-file-list="false"
          :on-progress="uploadProcess"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.mapUrl&&uploadFlag==false" :src="form.mapUrl" class="avatar">
          <i v-else-if="!form.facePic&&uploadFlag==false" class="el-icon-plus avatar-uploader-icon"></i>
          <el-progress v-if="uploadFlag == true" type="circle" :percentage="uploadPercent"
                       style="margin-top:40px;"></el-progress>
        </el-upload>
      </el-form-item>
      <el-form-item label="场地长">
        <el-input v-model="form.mapRealHeight" class="form_input" prop="mapRealHeight"/>
      </el-form-item>
      <el-form-item label="场地宽">
        <el-input v-model="form.mapRealWidth" class="form_input" prop="mapRealWidth"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {add, edit} from '@/api/deviceMap'
  import {mapGetters} from 'vuex'
  import {getToken} from '@/utils/auth'
  export default {
    props: {
      isAdd: {
        type: Boolean,
        required: true
      },
      sup_this: {
        type: Object,
        default: null
      },
      dict: {
        type: Object,
        required: true
      }
    },
    computed: {
      ...mapGetters([
        'imagesUploadApi'
      ])
    },
    data() {
      return {
        headers: {
          'Authorization': 'Bearer ' + getToken()
        },
        loading: false, dialog: false,
        uploadFlag: false,
        uploadPercent: 0,
        form: {
          id: '',
          mapName: '',
          mapUrl: '',
          mapWidth: '',
          mapHeight: '',
          mapRealWidth: '',
          mapRealHeight: '',
          creator: '',
          createTime: '',
          updator: '',
          updateTime: ''
        },
        rules: {}
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.uploadFlag = false;
        this.uploadPercent = 0;
        this.form.mapUrl = res.data;
      },
      beforeAvatarUpload(file) {
        console.log(file);
        const isJPG = file.type === 'image/jpeg'|| file.type ==='image/png';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadProcess(event, file, fileList){
        this.uploadFlag = true;
        console.log(file.percentage)
        this.uploadPercent = file.percentage.toFixed(0) * 1;

      },
      cancel() {
        this.resetForm()
      },
      doSubmit() {
        this.loading = true
        if (this.isAdd) {
          this.doAdd()
        } else this.doEdit()
      },
      doAdd() {
        add(this.form).then(res => {
          this.resetForm()
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.sup_this.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      doEdit() {
        edit(this.form).then(res => {
          this.resetForm()
          this.$notify({
            title: '修改成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.sup_this.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      resetForm() {
        this.dialog = false
        this.$refs['form'].resetFields()
        this.form = {
          id: '',
          mapName: '',
          mapUrl: '',
          mapWidth: '',
          mapHeight: '',
          mapRealWidth: '',
          mapRealHeight: '',
          creator: '',
          createTime: '',
          updator: '',
          updateTime: ''
        }
      }
    }
  }
</script>

<style scoped>
  .form_input {
    width: 180px;
  }

  .form_input_row {
    width: 455px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;;
    cursor: pointer !important;;
    position: relative !important;;
    overflow: hidden !important;;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    font-size: 28px;
    color: #8c939d;
    width: 182px;
    height: 255px;
    line-height: 255px;
    text-align: center;
  }

  .avatar {
    max-width: 560px;
    max-height: 255px;
    display: block;
  }
</style>
